<template>
  <div class="homeWrap">
    <div class="headerWrap">
      <van-nav-bar title="岭师论坛" fixed />
    </div>
    <div class="contentWrap">
      <div v-if="active === 0" class="contentWrap_home">
        <home></home>
      </div>
      <div v-if="active === 1" class="contentWrap_campusCircle">
        <campus-circle></campus-circle>
      </div>
      <div v-if="active === 2" class="contentWrap_release">
        <creat-post @Post="post"></creat-post>
      </div>
      <!-- <div v-if="active === 3" class="contentWrap_news">消息</div> -->
      <div v-if="active === 3" class="contentWrap_my">
        <my></my>
      </div>
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o">校园圈</van-tabbar-item>
      <van-tabbar-item icon="add-o">发布</van-tabbar-item>
      <!-- <van-tabbar-item icon="chat-o">消息</van-tabbar-item> -->
      <van-tabbar-item icon="contact">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import campusCircle from "../campusCircle/campusCircle";
import my from "../my/my";
import creatPost from "../post/creatPost";
import home from "../home/home";
export default {
  components: {
    campusCircle,
    my,
    creatPost,
    home,
  },
  data() {
    return {
      active: 0,
    };
  },
  computed: {},
  created() {},
  methods: {
    post() {
      this.active = 0;
    },
  },
};
</script>
<style scoped>
.homeWrap {
  overflow-x: hidden;
}
.contentWrap {
  margin-top: 46px;
  height: calc(100vh - 50px - 46px);
}
</style>
